<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-22 01:23
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div class="x-render-right">
    <a-tabs v-model="activeTab" size="small">
      <a-tab-pane
        v-for="tab of tabs"
        :key="tab.name"
        :tab="tab.label"
      />
    </a-tabs>
    <perfect-scrollbar ref="scroll" class="x-render-scrollarea">
      <component
        :is="activeTab"
        :key="activeTab"
        class="x-render-right-content"
      />
    </perfect-scrollbar>
  </div>
</template>

<script>
import XDesignFormProps from './components/XDesignFormProps'
import XDesignFormItemAttrs from './components/XDesignFormItemAttrs'
import XDesignFormItemCommon from './components/XDesignFormItemCommon'
import XDesignFormLayout from './components/XDesignFormLayout'

export default {
  name: 'XDesignFormRightIndex',
  inject: ['xDesignForm'],
  components: {
    XDesignFormProps,
    XDesignFormItemAttrs,
    XDesignFormItemCommon,
    XDesignFormLayout
  },
  data() {
    return {
      activeTab: '',
      tabs: []
    }
  },
  methods: {
    initTabs() {
      const { xDesignForm } = this
      const { rightTabs } = xDesignForm || {}
      if (!rightTabs) {
        return []
      }
      return rightTabs.filter(item => {
        if (typeof (item.show) === 'boolean') {
          return item.show
        }
        if (typeof (item.show) === 'function') {
          return item.show.call(this, xDesignForm)
        }
        return false
      })
    }
  },
  watch: {
    // 切换Tab滚动到顶部
    activeTab() {
      this.$refs.scroll.$el.scrollTop = 0
    },
    // 设置初始化页面
    'xDesignForm.currentId': {
      immediate: true,
      deep: true,
      handler() {
        const arr = this.initTabs()
        this.activeTab = arr[0].name
        this.tabs.splice(0, this.tabs.length, ...arr)
      }
    }
  }
}
</script>
<style lang="css" scoped>
/* 右侧 */
.x-render-right {
  min-width: 300px;
  width: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 滚动区域 */
.x-render-scrollarea {
  /* 减去头部的高度 */
  height: calc(100% - 60px);
}

/deep/ .ant-tabs-tab {
  padding: 8px !important;
  margin-right: 20px !important;
}
</style>
